import styled from "@/pages/home/index.module.scss"
import {useCallback, useMemo} from 'react'
import {useNavigate} from 'react-router-dom'
import {info} from '@/utils'
export const HomeHeader = () => {
	const navigate = useNavigate()

	const onHome = useCallback(() => {
		navigate("/", {
			replace: true
		})
	}, [])

	const onLogin = useCallback(() => {
		navigate("/login", {
			replace: true
		})
	}, [])

	const onRegister = useCallback(() => {
		navigate("/register", {
			replace: true
		})
	}, [])

	const onInfo = useCallback(() => {
		navigate("/personal/PersonalData", {
			replace: true
		})
	}, [])

	const onShopping = useCallback(() => {
		navigate("/home/shopping", {
			replace: true
		})
	}, [])

	const onDis = useCallback(() => {
		navigate("/home/dis", {
			replace: true
		})
	}, [])

	const login = useMemo(() => {
		if (info()) {
			return (
				<div>
					<span onClick={onInfo}>{info()?.username}</span>
				</div>
			)
		}
		return (
			<div>
				<span onClick={onLogin}>登录</span>&nbsp;|&nbsp;<span onClick={onRegister}>注册</span>
			</div>
		)
	}, [info()])

	return (
		<header className={styled.header}>
			<div className={styled.nav}>
				<div className={styled.left}>
					<div>
						<span onClick={onHome}>电子商城</span>
					</div>
					{login}
				</div>
				<div className={styled.right}>
					<div onClick={onDis}>促销活动</div>
					<div onClick={onHome}>首页</div>
					<div onClick={onShopping}>购物车</div>
					<div onClick={onInfo}>个人中心</div>
				</div>
			</div>
		</header>
	)
}
